<template>
    <div class="login-container">
        <div class="login-from">
            <h1>中后台登录</h1>
            <a-form
                :model="loginForm"
                name="basic"
                :trigger="['change', 'blur']"
                autocomplete="off"
                @finish="onFinish"
            >
                <a-form-item
                    name="email"
                    :rules="[
                        { required: true, message: '邮箱是必填项' },
                        { type: 'email', message: '格式不对!!' }
                    ]"
                >
                    <a-input
                        allow-clear
                        v-model:value="loginForm.email"
                        placeholder="邮箱:super@a.com"
                    >
                        <template #prefix>
                            <user-outlined type="user" />
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item name="password" :rules="[{ required: true, message: '密码是必填项' }]">
                    <a-input-password v-model:value="loginForm.password">
                        <template #prefix>
                            <lock-outlined />
                        </template>
                    </a-input-password>
                </a-form-item>
                <a-form-item>
                    <a-button :loading="btnLoading" type="primary" html-type="submit"
                        >登录</a-button
                    >
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script setup>
import { loginAPI, registerAPI } from '@/api/login.js'
import { reactive, ref, getCurrentInstance } from 'vue'
import { userStore } from '@/store/index.js'
import { useRouter } from 'vue-router'
const { proxy: _this } = getCurrentInstance()
//登录表单数据
const loginForm = reactive({
    email: 'super@a.com',
    password: '123123'
})
//pinia user对象
const useUser = userStore()
//初始化路由对象
const $router = useRouter()
const btnLoading = ref(false)
//表单提交
const onFinish = (values) => {
    //按钮进入loading
    btnLoading.value = !btnLoading.value
    // registerAPI({
    //     name: 'lnn',
    //     email: '18335771567@163.com',
    //     password: '123123',
    //     password_confirmation: '123123'
    // }).then((res) => {
    //     console.log(res)
    // })
    //发起登录请求
    loginAPI(values)
        .then((res) => {
            useUser.setToken(res)
            $router.push('/')
            _this.$message.success('登录成功')
        })
        .catch((err) => {
            btnLoading.value = !btnLoading.value
        })
}
</script>
<style scoped lang="scss">
.login-container {
    width: 100%;
    height: 100%;
    background: url('@/assets/login.png');
    padding-top: 200px;
    .login-from {
        h1 {
            font-size: 24px;
            color: #333;
            font-weight: 700;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        width: 328px;
        height: 300px;
        margin: 0px auto;
        .ant-btn-primary {
            width: 100%;
        }
    }
}
</style>
